<template>
	<view class='list'>
		<Header></Header>
		<view class='list-main'>
			<view class='list-l'>
				<view 
					v-for='item in firstList' 
					:key='item.id'
					:class='current==item.id?"active":"" '
					@click='tabsFirst(item.id)'
				>
					{{ item.categoryName }}
				</view>
			</view>
			<view class='list-r'>
				<scroll-view scroll-y="true" :style="'height:'+height+'px;'">
					<view>
						<view class='r-img'>
							<image src="../../static/banner.d093dd6e.png" mode=""></image>
						</view>
						<view class='r-main'>
							<view 
								v-for='item in secondList' 
								:key='item.id'
								class='r-main-item'
							>	
								<image :src="item.thumbnail" mode=""></image>
								<text>{{ item.categoryName }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { getFirstCategorys ,getSecondCategorys } from '../../api/course.js'
import {  mixin  } from '@/mixins/mixin.js'
export default{
	mixins:[mixin],
	components:{
		Header
	},
	data () {
		return {
			firstList:[{
				categoryName:'全部',
				id:'-1'
			}],
			secondList:[],
			current:'-1',
			categoryParams:{
				categoryId:-1
			},
			height:0,
		}
	},
	onLoad(){
		//获取一级数据
		getFirstCategorys().then(res=>{
			this.firstList = [...this.firstList,...res.list];
		})
		//获取二级数据
		this.getCategorys();
	},
	onReady() {
		this.height = this.getHeight('.header-search');
	},
	methods:{
		//获取二级数据
		getCategorys(){
			getSecondCategorys(this.categoryParams).then(res=>{
				this.secondList = res.list;
			})
		},
		//切换一级类目
		tabsFirst( id ){
			this.current = id;
			//获取二级数据
			this.categoryParams.categoryId = id;
			this.getCategorys();
		}
	}
	
}
</script>

<style>
.list-main{
	display: flex;
	justify-content: space-between;
}
.list-l{
	width: 217rpx;
	line-height: 77rpx;
	font-size: 28rpx;
	color: #777777;
	text-align: center;
	background: rgba(247,249,255,0.39);
}
.list-l > view{
	padding:18rpx 0;
}
.list-r{
	flex:1;
	display: flex;
	flex-direction: column;
}
.r-img{
	padding:0 34rpx;
}
.r-img image{
	width: 479rpx;;
	height: 192rpx;
	border-radius: 17rpx;
}
.r-main{
	display: flex;
	flex-wrap: wrap;
}
.r-main-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 33.33333%;
	margin-top: 44rpx;
}
.r-main-item image{
	width: 83rpx;
	height: 83rpx;
}
.r-main-item text{
	padding:18rpx 0;
	font-size: 24rpx;
	color: #A9A9A9;
}
.active{
	position: relative;
	color:#3780EF;
	font-weight: 400;
}
.active:before{
	content: '';
	position: absolute;
	left:0;
	top:50%;
	width: 6rpx;
	height: 40%;
	transform: translateY(-50%);
	background: rgba(55,128,239,0.27);
	border: 1px solid #0065FF;
	border-radius: 3px;
}
</style>